<!-- 社区拼团 -->
<template>
  <div class="teamShopping">
    <myheader title="社区拼团" rightBtn="首页" @updataInfo="submitRecruit"></myheader>

    <!-- 搜索栏 -->
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>

    <van-tabs sticky swipeable lazy-render v-if="!empty" :active="active" @change="selectType">
      <van-tab :title="item.name" v-for="(item,index) in titleList " :key="index">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            :loading="loading"
            :finished="finished"
            :finished-text="msg"
            @load="init"
            ref="list"
          >
            <shopping-item
              @getLost="handelChange"
              :pageSize="pageSize"
              :total="total"
              :teamShopping="teamShopping"
              :currentPage="currentPage"
              :pageCount="pageCount"
            ></shopping-item>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-empty v-else image="error" description="暂无此内容！" />
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import shoppingItem from '../../../comon/shoppingItem.vue'
export default {
  components: {
    myheader,
    shoppingItem,
  },
  data() {
    return {
      titleList: [
        {
          id: 0,
          name: '电脑',
          type: 0,
        },
        {
          id: 1,
          name: '手机',
          type: 1,
        },
        {
          id: 2,
          name: '男装',
          type: 2,
        },
        {
          id: 3,
          name: '食品',
          type: 3,
        },
      ],
      active: 0, //  当前页面显示的类型
      teamShopping: [],
      currentPage: 1,
      pageSize: 8,
      pageCount: 1,
      total: 4,
      empty: false,
      searchValue: '',

      loading: false, // 下拉加载
      finished: false,
      refreshing: false,
      msg: '下拉刷新',
      flag: false,
    }
  },

  created() {
    this.init()
  },

  methods: {
    async init() {
      if (this.refreshing) {
        this.teamShopping = []
        this.refreshing = false
      }

      const res = await this.$axios.get(
        '/goods/group/list?current=' +
          this.currentPage +
          '&size=' +
          this.pageSize +
          '&type=' +
          this.active
      )
      if (res.data.code == 200) {
        this.teamShopping = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.empty = false
        this.finished = true

        this.currentPage = res.data.data.current

        if (this.currentPage * this.pageSize > this.total) {
          this.msg = '没有更多了'
          this.flag = true
        } else {
          this.flag = false
        }
      }
      this.loading = false
    },
    // 刷新
    onRefresh() {
      this.finished = false
      this.loading = true
      this.currentPage++ > Math.ceil(this.total / this.pageSize)
        ? this.currentPage++
        : this.currentPage

      console.log(this.flag)
      if (!this.flag) {
        this.init()
      } else {
        this.refreshing = false
        this.loading = false
        this.finished = true
      }
    },
    async onSearch() {
      const res = await this.$axios.get(
        '/goods/group/list?title=' + this.searchValue
      )
      if (res.data.code == 200) {
        this.teamShopping = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    // 分页
    handelChange(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    // 选择渲染的类型
    selectType(type) {
      this.active = type
      this.init()
    },
    //  回到首页
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.serarch {
  margin-top: 46px;
}
.teamShopping_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.teamShopping_ul_li {
  padding: 10px;
  font-size: 16px;
  width: 50%;
  box-sizing: border-box;
}
.teamShopping_ul_li > div > img {
  height: 180px;
  width: 100%;
}
.teamShopping_ul_li > p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.teamShopping_ul_li > p:nth-child(2) {
  font-size: 14px;
}
.teamShopping_ul_li > p:nth-child(3) {
  color: red;
}
.teamShopping_ul_li > p:nth-child(4) {
  font-size: 12px;
  border: 1px solid red;
  border-radius: 5px;
}
</style>
